<template>
	<view class="body">
		
	<!-- 	<view class="order_head">
			<view class="order_li " :class="[status=='-1'?'icon':'']">全部</view>
			<view class="order_li " :class="[status=='0'?'icon':'']">待支付</view>
			<view class="order_li " :class="[status=='1'?'icon':'']">已支付</view>
			<view class="order_li " :class="[status=='2'?'icon':'']">未支付</view>
		</view> -->
		
		<view style="height: 5rpx;"></view>
		
		<view class="orderbox" v-for="(item,index) in lists">
			<view class="order_sn">
				<view class="order_sn1"> {{item.payorder}}  </view>
				<view class="order_sn2"> {{item.status==1?'已支付':'待支付'}}  </view>
			</view>
			
			<view class="orderinfo" :data-id="item.land_id" @tap="seegoods">
				<image :src="item.image" class="good_img" mode=""></image>
				<view class="orderinfo_r">
					<view class="order_name font1">{{item.name}}</view>
					<view class="order_money"> ¥ {{item.money}}</view>
				</view>
			</view>
			
			<view class="order_rime">
				<view class="order_t"> {{item.times}}</view>
				<view class="order_s">
					<!-- <view class="order_s1">支付</view> -->
					<!-- <view class="order_s2">取消</view> -->
					
				</view>
			</view>
			
		</view>
		
		<view class="nolist" v-if="lists.length<1">
			<image src="/static/image/nolist.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {curl} from 'common/api.js';
	export default {
		data() {
			return {
				lists:[],
				status:'1',
				page:1
			}
		},
		
		onShow() {
			
			this.lists=[];
			this.page=1;
			this.getmyorder();
		},
		//加载更多
		onReachBottom(){
			console.log('1111');
			this.getmyorder();
		},
		methods: {
			seegoods(ret){
				console.log(ret);
				var id=ret.currentTarget.dataset.id;
				
				uni.navigateTo({
					url:"/pages/index/info?id="+id
				})
			},
			
			getmyorder(){
				
				var that=this;
				var page=this.page;
				var lists=this.lists;
				curl('member/getmyorder', {page:page}).then((res) => {
					console.log('我的订单',res.data);
						var list=res.data;
						list.forEach(function(item){
							lists.push(item);
						})
				});
				
				this.lists=lists;
				this.page=page+1;
			}
			
		}
	}
</script>

<style>
	.order_s2{
		width: 100rpx;height: 40rpx;margin-right: 8rpx;
		text-align: center;line-height: 40rpx;
		color: #000000;font-size: 24rpx;
		border-radius: 5rpx;background: #e7e7e7;
	}
	.order_s1{
		width: 100rpx;height: 40rpx;margin-right: 18rpx;
		text-align: center;line-height: 40rpx;
		color: #ffffff;font-size: 24rpx;
		border-radius: 5rpx;background: #08b059;
	}
	.order_s{
		width: 300rpx;height: 40rpx;
		display: flex;justify-content: flex-end;
	}
	.order_t{
		font-size: 25rpx;color: #666666;
	}
	.order_rime{
		width: 640rpx;height: 80rpx;margin: auto;
		display: flex;align-items: center;justify-content: space-between;
	}
	.order_money{
		height: 40rpx;font-size: 28rpx;font-weight: bold;
		width: 540rpx;line-height: 50rpx;
		color: orangered;
	}
	.order_name{
		height: 50rpx;font-size: 28rpx;font-weight: bold;
		line-height: 40rpx;
	}
	.orderinfo_r{
		width: 540rpx;
		height: 80rpx;
	}
	.good_img{
		width: 90rpx;height: 90rpx;border-radius: 10rpx;margin-right: 20rpx;
	}
	.orderinfo{
		width: 660rpx;height: 120rpx;margin: auto;
		display: flex;align-items: center;
	}
	.order_sn2{
		font-size: 28rpx;
		color: #666666;line-height: 40rpx;
	}
	.order_sn1{
		width: 400rpx;font-size: 28rpx;
		color: #666666;line-height: 40rpx;
	}
	.order_sn{
		width: 660rpx;height: 80rpx;margin: auto;
		border-bottom: 1px solid #ececec;
		display: flex;
		align-items: center;		justify-content: space-between;
}
	.orderbox{
		width: 700rpx;height: auto;margin:15rpx auto;
		background: #ffffff;border-radius: 10rpx;
	}
	.icon{
		color:#08b059 !important ;
	}
	.order_li{
		font-size: 32rpx;font-weight: bold;
	}
	.order_head{
		width: 650rpx;height: 80rpx;margin: auto;
		display: flex;align-items: center;justify-content: space-around;
	}
	.body{
		width: 100%;min-height: 100vh;
		background: #fafafa;
	}
</style>
